import * as React from 'react';
import RcCheckbox from 'rc-checkbox';
import { ConfigContext } from '../config-provider';
import RadioGroupContext, { RadioOptionTypeContext } from './context';
import classNames from 'classnames';
import { composeRef } from 'rc-util/lib/ref';

const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, any> = (
  props,
  ref,
) => {
  const { getPrefixCls } = React.useContext(ConfigContext);
  const groupContext = React.useContext(RadioGroupContext);
  const innerRef = React.useRef<HTMLElement>();
  const mergedRef = composeRef(ref, innerRef);
  
  const {
    prefixCls: customizePrefixCls,
    className,
    rootClassName,
    children,
    style,
    ...restProps
  } = props;
  const radioPrefixCls = getPrefixCls('radio');
  const prefixCls = radioPrefixCls;
  const radioProps = { ...restProps };

  const onChange = (e) => {
    props.onChange?.(e);
    groupContext?.onChange?.(e);
  };

  if (groupContext) {
    radioProps.name = groupContext.name;
    radioProps.onChange = onChange;
    radioProps.checked = props.value === groupContext.value;
  }

  //console.log('radioProps.checked',radioProps.checked,groupContext?.value)

  radioProps.disabled = radioProps.disabled ?? false;

  const wrapperClassString = classNames(`${prefixCls}-wrapper`, {
    [`${prefixCls}-wrapper-checked`]: radioProps.checked,
    [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
  });

  return (
    <label className={wrapperClassString}>
      选项值：{radioProps.value}
      {/* <input
        {...radioProps}
        type="radio"
        value={radioProps.value}
        checked={radioProps.checked}
      /> */}
     
      <RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef}  />
      {children !== undefined ? <span>{children}</span> : null}
    </label>
  );
};

const Radio = React.forwardRef(InternalRadio);

export default Radio;
